var RegisterHeader = React.createClass({
    handleBackClick: function () {
        window.location.replace('login.html');
    },
    render: function() {
        return (
            <header data-am-widget="header" className="am-header am-header-default am-header-fixed">
                <div className="am-header-left am-header-nav">
                    <a onClick={this.handleBackClick} className="widht-10s" ><i className="icon_8"></i></a>
                </div>
                <h1 className="am-header-title">注册</h1>
            </header>
        )
    }
});

var RegisterMain = React.createClass({
    handleRegisterClick: function() {
        var param = {
            phone: ReactDOM.findDOMNode(this.refs.phone).value,
            password: ReactDOM.findDOMNode(this.refs.password).value,
            smsCode: ReactDOM.findDOMNode(this.refs.code).value
        };
        this.props.register(param);
    },
    handleCodeClick: function(e) {
        var param = {
            phone: ReactDOM.findDOMNode(this.refs.phone).value
        };
        this.props.getCode(param, e.target);
        e.stopPropagation();
        e.preventDefault();
    },
    handleLoginPageClick: function(){
        location.replace('login.html');
    },
    render: function() {
        return (
            <section id="amz-main" data-tag="css-nav">
                <div className="div-logo"></div>
                <ul className="am-list am-list-static am-list-border register">
                    <li><input type="tel" className="am-padding-left-lg" maxLength="11" placeholder="请输入手机号" ref="phone"/></li>
                    <li><input type="tel" className="am-padding-left-lg" maxLength="6" placeholder="请输入验证码" ref="code"/><i onClick={this.handleCodeClick} className="validate_btn" style={{'opacity':'1'}}>获取验证码</i></li>
                    <li><input type="password" className="am-padding-left-lg" maxLength="30" placeholder="请输入密码" ref="password"/></li>
                </ul>
                <div className="am-g font-15 am-margin-top-lg">
                    <div className="am-u-sm-12 am-text-center">
                        <div className="btn-88 word-space-2" onClick={this.handleRegisterClick}>注册</div>
                    </div>
                </div>
                <div className="am-padding-top-sm am-padding-bottom-sm font-14 am-text-center font-color-5">
                    <a onClick={this.handleLoginPageClick}>登录已有账号</a>
                </div>
                <div className="box am-margin-top-lg">
                    <div><div className="bottomline"></div></div>
                    <div className="box-1 am-text-center"><div className="font-color-1 font-14">第三方登录</div></div>
                    <div><div className="bottomline"></div></div>
                </div>
                <div className="am-margin-top-sm"><img className="width-45px am-center" src="../assets/images/icons/weix.png"/></div>
            </section>
        )
    }
});

var Page = React.createClass ({
    getInitialState: function() {
        return{
            msgHidden: true,
            msg: '',
            smsMessageSid: ''
        }
    },
    close: function() {
        this.setState({
            msgHidden: true
        });
    },
    showMsg: function(msg) {
        this.setState({
            msgHidden: false,
            msg: msg
        });
        return false;
    },
    register: function(param) {
        if(param.phone == ''){
            return this.showMsg( MSG.PHONE_NOT_NULL );
        }else if(!PHONE.test(param.phone)){
            return this.showMsg(MSG.PHONE_NOT_RIGHT);
        }else if(param.smsCode == '') {
            return this.showMsg( MSG.CODE_NOT_NULL );
        }else if(param.password == ''){
            return this.showMsg( MSG.PWD_NOT_NULL );
        }else if(!PWD.test(param.password)){
            return this.showMsg( MSG.PWD_NOT_RIGHT );
        }
        param.smsMessageSid = this.state.smsMessageSid;
        $.ajax(
            getAjaxOps('/user/signUp', param)
        ).done(function(res){
            if(res.resultCode == 0){
                if(res.data.userId){
                    setUser(res.data.userId, new Date().getTime());
                    clearPreUrl();
                    location.replace(PRE_URL);
                }else {
                    return this.showMsg(res.data.errorInfo);
                }
            }else {
                return this.showMsg(res.resultMsg);
            }
        }.bind(this));
    },
    getCode: function(param, target) {
        if(target.style.opacity != 1){
            return false;
        }
        if(param.phone == ''){
            return this.showMsg( MSG.PHONE_NOT_NULL );
        }else if(!PHONE.test(param.phone)){
            return this.showMsg( MSG.PHONE_NOT_RIGHT );
        }
        console.log('getCode');
        $.ajax(
            getAjaxOps('/user/getCode', param)
        ).done(function (res) {
            if(res.resultCode == 0){
                if(res.data.templateSMS && res.data.templateSMS.smsMessageSid){
                    target.style.opacity = '.4';
                    setTimeout(function(){
                        target.style.opacity = '1';
                    }, 60000);
                    this.setState({
                        smsMessageSid: res.data.templateSMS.smsMessageSid
                    })
                }else{
                    return this.showMsg(res.data.statusMsg);
                }
            }else {
                return this.showMsg(res.resultMsg);
            }
        }.bind(this));
    },
    render: function() {
        return (
            <div>
                <Message hidden={this.state.msgHidden} msg={this.state.msg} close={this.close}/>
                <RegisterHeader />
                <RegisterMain register={this.register} getCode={this.getCode} />
            </div>
        )
    }

});

ReactDOM.render(
    <Page />,
    document.getElementById('root')
);